<script setup>
import { message } from 'ant-design-vue'
import databaseTree from "@/views/datasource/databaseTree.vue"
const props = defineProps(["sourceDsId", "targetDsId", "databaseConfig"])


const soruceSelectChange = (r) => {
	if (r.type == "dataSource") {
		return
	}
	props.databaseConfig.sourceDatabaseName = r.title;

}
watch(() => props.databaseConfig, (newValue, oldValue) => {
	initTargetDs();
})

onMounted(async () => {
	initTargetDs();
})

const initTargetDs = () => {
	nextTick(() => {
		if (!props.targetDsId) {
			props.databaseConfig.targetDatabaseName = null;
		}
	})
}


const targetSelectChange = (r) => {
	if (r.type == "dataSource") {
		return
	}
	props.databaseConfig.targetDatabaseName = r.title;

}

</script>

<template>


	<a-row :gutter="10" class="mb-2">
		<a-col :span="12">
			<a-card>
				<databaseTree :editor="false" :viewTableFlag="false" :dataSourceId="props.sourceDsId"
					:selectChange="soruceSelectChange"></databaseTree>
			</a-card>
		</a-col>
		<a-col :span="12">
			<a-card>
				<databaseTree :editor="false" :viewTableFlag="false" :dataSourceId="props.targetDsId"
					:selectChange="targetSelectChange"></databaseTree>
			</a-card>
		</a-col>
	</a-row>


	<a-row :gutter="10" class="mb-2">
		<a-col :span="24">
			<a-card>
				<span>
					{{ props.databaseConfig?.sourceDatabaseName }}
				</span>
				<span v-if="props.databaseConfig?.sourceDatabaseName || props.databaseConfig?.targetDatabaseName">
					->
				</span>
				<span>
					{{ props.databaseConfig?.targetDatabaseName }}
				</span>
			</a-card>
		</a-col>
	</a-row>
</template>

<style scoped lang="less"></style>
